<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>企业筛选 - 社交网络</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #2563eb;
            --primary-light: #60a5fa;
            --primary-dark: #1d4ed8;
            --secondary: #7c3aed;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --text-tertiary: #94a3b8;
            --bg-light: #f8fafc;
            --bg-white: #ffffff;
            --bg-gray: #f1f5f9;
            --bg-gray-dark: #e2e8f0;
            --border-light: #e2e8f0;
            --border-medium: #cbd5e1;
            --radius: 12px;
            --radius-sm: 8px;
            --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            border-bottom: 1px solid var(--border-light);
        }
        
        .nav-title {
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        .nav-action {
            color: var(--text-secondary);
            background: none;
            border: none;
            font-size: 1.2rem;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .nav-action:hover {
            background-color: var(--bg-light);
        }
        
        .nav-action.primary {
            color: var(--primary);
        }
        
        /* 搜索栏 */
        .search-container {
            padding: 12px 16px;
            background-color: var(--bg-white);
        }
        
        .search-box {
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border-radius: 24px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-gray);
            font-size: 0.9rem;
            outline: none;
        }
        
        .search-input:focus {
            border-color: var(--primary-light);
            background-color: white;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
        }
        
        .search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-tertiary);
        }
        
        /* 筛选区域 */
        .filters-container {
            background-color: var(--bg-white);
            margin-bottom: 12px;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
        }
        
        /* 筛选器标题 */
        .filter-section-title {
            padding: 12px 16px;
            font-size: 0.9rem;
            color: var(--text-secondary);
            border-bottom: 1px solid var(--border-light);
        }
        
        /* 1. 标签式筛选 */
        .filter-tags {
            display: flex;
            overflow-x: auto;
            padding: 12px 16px;
            scrollbar-width: none;
            gap: 8px;
        }
        
        .filter-tags::-webkit-scrollbar {
            display: none;
        }
        
        .filter-tag {
            padding: 6px 14px;
            background-color: var(--bg-gray);
            border-radius: 16px;
            font-size: 0.85rem;
            white-space: nowrap;
            border: none;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .filter-tag.active {
            background-color: var(--primary);
            color: white;
        }
        
        .filter-tag .count {
            background-color: rgba(255, 255, 255, 0.2);
            padding: 0 6px;
            border-radius: 8px;
            font-size: 0.75rem;
        }
        
        .filter-tag.active .count {
            background-color: rgba(255, 255, 255, 0.2);
        }
        
        /* 2. 下拉式筛选 */
        .filter-dropdown {
            padding: 0 16px;
        }
        
        .dropdown-select {
            width: 100%;
            padding: 12px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: none;
            border: none;
            border-bottom: 1px solid var(--border-light);
            font-size: 0.9rem;
            color: var(--text-primary);
        }
        
        .dropdown-select:last-child {
            border-bottom: none;
        }
        
        .dropdown-select .value {
            color: var(--text-secondary);
        }
        
        .dropdown-select .icon {
            color: var(--text-tertiary);
            transition: transform 0.2s ease;
        }
        
        .dropdown-select.active .icon {
            transform: rotate(180deg);
        }
        
        /* 3. 范围滑块筛选 */
        .filter-range {
            padding: 16px;
        }
        
        .range-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        
        .range-slider {
            width: 100%;
            -webkit-appearance: none;
            height: 4px;
            border-radius: 2px;
            background: var(--bg-gray-dark);
            outline: none;
            margin-bottom: 12px;
        }
        
        .range-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--primary);
            cursor: pointer;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
        }
        
        .range-values {
            display: flex;
            justify-content: space-between;
            font-size: 0.9rem;
            color: var(--primary);
            font-weight: 500;
        }
        
        /* 4. 复选框筛选 */
        .filter-checkboxes {
            padding: 8px 16px;
        }
        
        .checkbox-item {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid var(--border-light);
        }
        
        .checkbox-item:last-child {
            border-bottom: none;
        }
        
        .custom-checkbox {
            width: 18px;
            height: 18px;
            border-radius: 4px;
            border: 1px solid var(--border-medium);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            flex-shrink: 0;
        }
        
        .custom-checkbox.checked {
            background-color: var(--primary);
            border-color: var(--primary);
            color: white;
        }
        
        .checkbox-label {
            font-size: 0.9rem;
            flex: 1;
        }
        
        .checkbox-count {
            font-size: 0.8rem;
            color: var(--text-tertiary);
        }
        
        /* 5. 开关筛选 */
        .filter-toggles {
            padding: 8px 16px;
        }
        
        .toggle-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid var(--border-light);
        }
        
        .toggle-item:last-child {
            border-bottom: none;
        }
        
        .toggle-label {
            font-size: 0.9rem;
        }
        
        .custom-toggle {
            position: relative;
            width: 44px;
            height: 24px;
            background-color: var(--bg-gray-dark);
            border-radius: 12px;
            transition: background-color 0.2s ease;
        }
        
        .custom-toggle.active {
            background-color: var(--primary);
        }
        
        .toggle-thumb {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            background-color: white;
            transition: transform 0.2s ease;
        }
        
        .custom-toggle.active .toggle-thumb {
            transform: translateX(20px);
        }
        
        /* 筛选操作栏 */
        .filters-actions {
            display: flex;
            padding: 12px 16px;
            gap: 12px;
            background-color: var(--bg-white);
            position: sticky;
            top: 56px;
            z-index: 900;
            border-bottom: 1px solid var(--border-light);
        }
        
        .filter-btn {
            flex: 1;
            padding: 10px;
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: 500;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        
        .reset-btn {
            background-color: var(--bg-gray);
            color: var(--text-secondary);
        }
        
        .apply-btn {
            background-color: var(--primary);
            color: white;
        }
        
        .active-filters {
            padding: 12px 16px;
            background-color: var(--bg-white);
            border-bottom: 1px solid var(--border-light);
        }
        
        .active-filters-title {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }
        
        .active-filters-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .active-filter-tag {
            background-color: rgba(37, 99, 235, 0.1);
            color: var(--primary);
            padding: 4px 10px;
            border-radius: 16px;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .remove-filter {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: rgba(37, 99, 235, 0.2);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
        }
        
        /* 企业列表容器 */
        .enterprises-container {
            padding: 12px 16px;
        }
        
        /* 企业卡片 */
        .enterprise-card {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            overflow: hidden;
            margin-bottom: 12px;
            box-shadow: var(--shadow);
            text-decoration: none;
            color: var(--text-primary);
            transition: transform 0.2s ease;
        }
        
        .enterprise-card:hover {
            transform: translateY(-2px);
        }
        
        .enterprise-header {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .enterprise-logo {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            background-color: var(--bg-gray);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            font-size: 1.5rem;
        }
        
        .enterprise-logo img {
            width: 100%;
            height: 100%;
            border-radius: 8px;
            object-fit: cover;
        }
        
        .enterprise-info {
            flex: 1;
        }
        
        .enterprise-name {
            font-weight: 600;
            font-size: 1rem;
            margin-bottom: 2px;
        }
        
        .enterprise-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        .enterprise-industry {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .enterprise-location {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .enterprise-follow {
            color: var(--primary);
            font-size: 0.85rem;
            font-weight: 500;
            background: none;
            border: 1px solid var(--primary);
            border-radius: 14px;
            padding: 4px 10px;
            flex-shrink: 0;
        }
        
        .enterprise-follow.followed {
            color: var(--text-secondary);
            border-color: var(--border-light);
        }
        
        /* 企业数据统计 */
        .enterprise-stats {
            display: flex;
            justify-content: space-between;
            padding: 10px 16px;
            border-top: 1px solid var(--border-light);
            font-size: 0.8rem;
            color: var(--text-tertiary);
        }
        
        .enterprise-stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
        }
        
        .stat-value {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 0.9rem;
            margin-bottom: 2px;
        }
        
        .stat-label {
            font-size: 0.75rem;
        }
        
        /* 加载更多 */
        .load-more {
            padding: 16px 0;
            text-align: center;
        }
        
        .load-more-btn {
            background-color: var(--bg-white);
            border: 1px solid var(--border-light);
            color: var(--text-secondary);
            padding: 8px 24px;
            border-radius: 20px;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0 auto;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            font-size: 0.7rem;
            gap: 4px;
            flex: 1;
            height: 100%;
            text-decoration: none;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .nav-icon {
            font-size: 1.2rem;
        }
        
        /* 提示消息 */
        .toast {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            z-index: 9999;
            font-size: 0.85rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast.show {
            opacity: 1;
        }
        
        /* 筛选抽屉 */
        .filter-drawer {
            position: fixed;
            top: 56px;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--bg-white);
            z-index: 1010;
            transform: translateY(100%);
            transition: transform 0.3s ease;
            overflow-y: auto;
        }
        
        .filter-drawer.open {
            transform: translateY(0);
        }
        
        .drawer-header {
            padding: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border-light);
        }
        
        .drawer-title {
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        .close-drawer {
            background: none;
            border: none;
            font-size: 1.2rem;
            color: var(--text-secondary);
        }
        
        .drawer-content {
            padding-bottom: 80px;
        }
        
        .drawer-actions {
            position: fixed;
            bottom: 60px;
            left: 0;
            right: 0;
            padding: 12px 16px;
            background-color: var(--bg-white);
            border-top: 1px solid var(--border-light);
            display: flex;
            gap: 12px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-action" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">企业筛选</div>
        <button class="nav-action primary" id="filterDrawerBtn">
            <i class="fas fa-sliders"></i>
        </button>
    </div>
    
    <!-- 搜索栏 -->
    <div class="search-container">
        <div class="search-box">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="搜索企业名称、关键词...">
        </div>
    </div>
    
    <!-- 快捷筛选操作栏 -->
    <div class="filters-actions">
        <button class="filter-btn reset-btn" id="resetFilters">
            <i class="fas fa-sync-alt"></i>
            <span>重置</span>
        </button>
        <button class="filter-btn apply-btn" id="applyFilters">
            <i class="fas fa-check"></i>
            <span>应用筛选</span>
        </button>
    </div>
    
    <!-- 活跃筛选条件 -->
    <div class="active-filters">
        <div class="active-filters-title">已选筛选条件</div>
        <div class="active-filters-tags">
            <div class="active-filter-tag">
                <span>科技行业</span>
                <span class="remove-filter" data-filter="industry">×</span>
            </div>
            <div class="active-filter-tag">
                <span>500人以上</span>
                <span class="remove-filter" data-filter="size">×</span>
            </div>
            <div class="active-filter-tag">
                <span>北京市</span>
                <span class="remove-filter" data-filter="location">×</span>
            </div>
        </div>
    </div>
    
    <!-- 筛选条件区域 -->
    <div class="filters-container">
        <!-- 1. 行业标签筛选 -->
        <div class="filter-section">
            <div class="filter-section-title">行业类型</div>
            <div class="filter-tags">
                <button class="filter-tag active">
                    <span>全部</span>
                    <span class="count">245</span>
                </button>
                <button class="filter-tag">
                    <span>科技</span>
                    <span class="count">86</span>
                </button>
                <button class="filter-tag">
                    <span>金融</span>
                    <span class="count">42</span>
                </button>
                <button class="filter-tag">
                    <span>教育</span>
                    <span class="count">38</span>
                </button>
                <button class="filter-tag">
                    <span>医疗</span>
                    <span class="count">29</span>
                </button>
                <button class="filter-tag">
                    <span>零售</span>
                    <span class="count">31</span>
                </button>
                <button class="filter-tag">
                    <span>服务</span>
                    <span class="count">19</span>
                </button>
            </div>
        </div>
        
        <!-- 2. 地区下拉筛选 -->
        <div class="filter-section">
            <div class="filter-section-title">所在地区</div>
            <div class="filter-dropdown">
                <button class="dropdown-select">
                    <span>省份</span>
                    <span class="value">全部</span>
                    <i class="fas fa-chevron-down icon"></i>
                </button>
                <button class="dropdown-select">
                    <span>城市</span>
                    <span class="value">全部</span>
                    <i class="fas fa-chevron-down icon"></i>
                </button>
            </div>
        </div>
        
        <!-- 3. 企业规模复选框筛选 -->
        <div class="filter-section">
            <div class="filter-section-title">企业规模</div>
            <div class="filter-checkboxes">
                <div class="checkbox-item">
                    <div class="custom-checkbox">
                        <i class="fas fa-check" style="font-size: 0.8rem; display: none;"></i>
                    </div>
                    <span class="checkbox-label">初创企业 (1-50人)</span>
                    <span class="checkbox-count">68</span>
                </div>
                <div class="checkbox-item">
                    <div class="custom-checkbox">
                        <i class="fas fa-check" style="font-size: 0.8rem; display: none;"></i>
                    </div>
                    <span class="checkbox-label">中小型企业 (51-500人)</span>
                    <span class="checkbox-count">92</span>
                </div>
                <div class="checkbox-item">
                    <div class="custom-checkbox checked">
                        <i class="fas fa-check" style="font-size: 0.8rem;"></i>
                    </div>
                    <span class="checkbox-label">大型企业 (501-1000人)</span>
                    <span class="checkbox-count">45</span>
                </div>
                <div class="checkbox-item">
                    <div class="custom-checkbox checked">
                        <i class="fas fa-check" style="font-size: 0.8rem;"></i>
                    </div>
                    <span class="checkbox-label">超大型企业 (1000人以上)</span>
                    <span class="checkbox-count">40</span>
                </div>
            </div>
        </div>
        
        <!-- 4. 成立年限滑块筛选 -->
        <div class="filter-section">
            <div class="filter-section-title">成立年限</div>
            <div class="filter-range">
                <div class="range-label">
                    <span>年限范围</span>
                </div>
                <input type="range" min="0" max="50" value="10" class="range-slider" id="yearRange">
                <div class="range-values">
                    <span>0年</span>
                    <span id="yearValue">10年以上</span>
                </div>
            </div>
        </div>
        
        <!-- 5. 其他开关筛选 -->
        <div class="filter-section">
            <div class="filter-section-title">其他条件</div>
            <div class="filter-toggles">
                <div class="toggle-item">
                    <span class="toggle-label">认证企业</span>
                    <div class="custom-toggle active">
                        <div class="toggle-thumb"></div>
                    </div>
                </div>
                <div class="toggle-item">
                    <span class="toggle-label">有招聘信息</span>
                    <div class="custom-toggle">
                        <div class="toggle-thumb"></div>
                    </div>
                </div>
                <div class="toggle-item">
                    <span class="toggle-label">最近活跃</span>
                    <div class="custom-toggle active">
                        <div class="toggle-thumb"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 企业列表容器 -->
    <div class="enterprises-container">
        <!-- 企业卡片1 -->
        <a href="#" class="enterprise-card">
            <div class="enterprise-header">
                <div class="enterprise-logo">
                    <img src="https://picsum.photos/id/28/200/200" alt="科技未来公司">
                </div>
                <div class="enterprise-info">
                    <div class="enterprise-name">科技未来有限公司</div>
                    <div class="enterprise-meta">
                        <div class="enterprise-industry">
                            <i class="fas fa-briefcase"></i>
                            <span>人工智能</span>
                        </div>
                        <div class="enterprise-location">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>北京市海淀区</span>
                        </div>
                    </div>
                </div>
                <button class="enterprise-follow">关注</button>
            </div>
            <div class="enterprise-stats">
                <div class="enterprise-stat-item">
                    <div class="stat-value">1.2k</div>
                    <div class="stat-label">关注者</div>
                </div>
                <div class="enterprise-stat-item">
                    <div class="stat-value">56</div>
                    <div class="stat-label">动态</div>
                </div>
                <div class="enterprise-stat-item">
                    <div class="stat-value">248</div>
                    <div class="stat-label">产品</div>
                </div>
            </div>
        </a>
        
        <!-- 企业卡片2 -->
        <a href="#" class="enterprise-card">
            <div class="enterprise-header">
                <div class="enterprise-logo">
                    <img src="https://picsum.photos/id/20/200/200" alt="绿源生态">
                </div>
                <div class="enterprise-info">
                    <div class="enterprise-name">绿源生态科技</div>
                    <div class="enterprise-meta">
                        <div class="enterprise-industry">
                            <i class="fas fa-briefcase"></i>
                            <span>环保科技</span>
                        </div>
                        <div class="enterprise-location">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>北京市朝阳区</span>
                        </div>
                    </div>
                </div>
                <button class="enterprise-follow followed">已关注</button>
            </div>
            <div class="enterprise-stats">
                <div class="enterprise-stat-item">
                    <div class="stat-value">856</div>
                    <div class="stat-label">关注者</div>
                </div>
                <div class="enterprise-stat-item">
                    <div class="stat-value">32</div>
                    <div class="stat-label">动态</div>
                </div>
                <div class="enterprise-stat-item">
                    <div class="stat-value">42</div>
                    <div class="stat-label">产品</div>
                </div>
            </div>
        </a>
        
        <!-- 企业卡片3 -->
        <a href="#" class="enterprise-card">
            <div class="enterprise-header">
                <div class="enterprise-logo">
                    <i class="fas fa-laptop-code"></i>
                </div>
                <div class="enterprise-info">
                    <div class="enterprise-name">数字引擎科技</div>
                    <div class="enterprise-meta">
                        <div class="enterprise-industry">
                            <i class="fas fa-briefcase"></i>
                            <span>软件开发</span>
                        </div>
                        <div class="enterprise-location">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>北京市西城区</span>
                        </div>
                    </div>
                </div>
                <button class="enterprise-follow">关注</button>
            </div>
            <div class="enterprise-stats">
                <div class="enterprise-stat-item">
                    <div class="stat-value">2.1k</div>
                    <div class="stat-label">关注者</div>
                </div>
                <div class="enterprise-stat-item">
                    <div class="stat-value">89</div>
                    <div class="stat-label">动态</div>
                </div>
                <div class="enterprise-stat-item">
                    <div class="stat-value">76</div>
                    <div class="stat-label">产品</div>
                </div>
            </div>
        </a>
    </div>
    
    <!-- 加载更多 -->
    <div class="load-more">
        <button class="load-more-btn" id="loadMoreBtn">
            <i class="fas fa-spinner fa-spin" style="display: none;"></i>
            <span>加载更多企业</span>
        </button>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home nav-icon"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-building nav-icon"></i>
            <span>企业</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-plus-circle nav-icon"></i>
            <span>发布</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-bell nav-icon"></i>
            <span>通知</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user nav-icon"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- 筛选抽屉 -->
    <div class="filter-drawer" id="filterDrawer">
        <div class="drawer-header">
            <div class="drawer-title">高级筛选</div>
            <button class="close-drawer" id="closeDrawer">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="drawer-content">
            <!-- 企业评分筛选 -->
            <div class="filter-section">
                <div class="filter-section-title">企业评分</div>
                <div class="filter-checkboxes">
                    <div class="checkbox-item">
                        <div class="custom-checkbox">
                            <i class="fas fa-check" style="font-size: 0.8rem; display: none;"></i>
                        </div>
                        <span class="checkbox-label">4分以上</span>
                        <span class="checkbox-count">128</span>
                    </div>
                    <div class="checkbox-item">
                        <div class="custom-checkbox checked">
                            <i class="fas fa-check" style="font-size: 0.8rem;"></i>
                        </div>
                        <span class="checkbox-label">3分以上</span>
                        <span class="checkbox-count">204</span>
                    </div>
                    <div class="checkbox-item">
                        <div class="custom-checkbox">
                            <i class="fas fa-check" style="font-size: 0.8rem; display: none;"></i>
                        </div>
                        <span class="checkbox-label">2分以上</span>
                        <span class="checkbox-count">235</span>
                    </div>
                </div>
            </div>
            
            <!-- 融资阶段筛选 -->
            <div class="filter-section">
                <div class="filter-section-title">融资阶段</div>
                <div class="filter-tags">
                    <button class="filter-tag active">
                        <span>全部</span>
                    </button>
                    <button class="filter-tag">
                        <span>未融资</span>
                    </button>
                    <button class="filter-tag">
                        <span>天使轮</span>
                    </button>
                    <button class="filter-tag">
                        <span>A轮</span>
                    </button>
                    <button class="filter-tag">
                        <span>B轮</span>
                    </button>
                    <button class="filter-tag">
                        <span>C轮+</span>
                    </button>
                    <button class="filter-tag">
                        <span>上市公司</span>
                    </button>
                </div>
            </div>
            
            <!-- 员工规模滑块 -->
            <div class="filter-section">
                <div class="filter-section-title">员工规模</div>
                <div class="filter-range">
                    <div class="range-label">
                        <span>人数范围</span>
                    </div>
                    <input type="range" min="0" max="10000" step="100" value="500" class="range-slider" id="employeeRange">
                    <div class="range-values">
                        <span>0人</span>
                        <span id="employeeValue">500人以上</span>
                    </div>
                </div>
            </div>
            
            <!-- 特殊标签筛选 -->
            <div class="filter-section">
                <div class="filter-section-title">企业标签</div>
                <div class="filter-checkboxes">
                    <div class="checkbox-item">
                        <div class="custom-checkbox">
                            <i class="fas fa-check" style="font-size: 0.8rem; display: none;"></i>
                        </div>
                        <span class="checkbox-label">高新技术</span>
                        <span class="checkbox-count">76</span>
                    </div>
                    <div class="checkbox-item">
                        <div class="custom-checkbox">
                            <i class="fas fa-check" style="font-size: 0.8rem; display: none;"></i>
                        </div>
                        <span class="checkbox-label">独角兽企业</span>
                        <span class="checkbox-count">12</span>
                    </div>
                    <div class="checkbox-item">
                        <div class="custom-checkbox checked">
                            <i class="fas fa-check" style="font-size: 0.8rem;"></i>
                        </div>
                        <span class="checkbox-label">瞪羚企业</span>
                        <span class="checkbox-count">34</span>
                    </div>
                    <div class="checkbox-item">
                        <div class="custom-checkbox">
                            <i class="fas fa-check" style="font-size: 0.8rem; display: none;"></i>
                        </div>
                        <span class="checkbox-label">专精特新</span>
                        <span class="checkbox-count">58</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="drawer-actions">
            <button class="filter-btn reset-btn" id="resetDrawerFilters">
                <i class="fas fa-sync-alt"></i>
                <span>重置</span>
            </button>
            <button class="filter-btn apply-btn" id="applyDrawerFilters">
                <i class="fas fa-check"></i>
                <span>确定</span>
            </button>
        </div>
    </div>
    
    <!-- 提示消息元素 -->
    <div class="toast" id="toast"></div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const filterTags = document.querySelectorAll('.filter-tag');
        const checkboxes = document.querySelectorAll('.custom-checkbox');
        const toggles = document.querySelectorAll('.custom-toggle');
        const yearRange = document.getElementById('yearRange');
        const yearValue = document.getElementById('yearValue');
        const employeeRange = document.getElementById('employeeRange');
        const employeeValue = document.getElementById('employeeValue');
        const resetFiltersBtn = document.getElementById('resetFilters');
        const applyFiltersBtn = document.getElementById('applyFilters');
        const removeFilterTags = document.querySelectorAll('.remove-filter');
        const loadMoreBtn = document.getElementById('loadMoreBtn');
        const backBtn = document.getElementById('backBtn');
        const filterDrawerBtn = document.getElementById('filterDrawerBtn');
        const filterDrawer = document.getElementById('filterDrawer');
        const closeDrawerBtn = document.getElementById('closeDrawer');
        const resetDrawerFiltersBtn = document.getElementById('resetDrawerFilters');
        const applyDrawerFiltersBtn = document.getElementById('applyDrawerFilters');
        const dropdownSelects = document.querySelectorAll('.dropdown-select');
        
        // 标签式筛选切换
        filterTags.forEach(tag => {
            tag.addEventListener('click', function() {
                // 检查是否是同组的标签（父级相同的标签组）
                const parent = this.parentElement;
                const siblings = parent.querySelectorAll('.filter-tag');
                
                // 如果不是"全部"标签，或者是"全部"标签但未被选中，则取消同组其他标签的选中状态
                if (!this.textContent.includes('全部') || !this.classList.contains('active')) {
                    siblings.forEach(sib => sib.classList.remove('active'));
                }
                
                // 切换当前标签状态
                this.classList.toggle('active');
            });
        });
        
        // 复选框筛选
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('click', function() {
                this.classList.toggle('checked');
                const checkIcon = this.querySelector('i');
                
                if (this.classList.contains('checked')) {
                    checkIcon.style.display = 'block';
                } else {
                    checkIcon.style.display = 'none';
                }
            });
        });
        
        // 开关筛选
        toggles.forEach(toggle => {
            toggle.addEventListener('click', function() {
                this.classList.toggle('active');
            });
        });
        
        // 年限范围滑块
        yearRange.addEventListener('input', function() {
            const value = this.value;
            yearValue.textContent = `${value}年以上`;
        });
        
        // 员工规模滑块
        employeeRange.addEventListener('input', function() {
            const value = this.value;
            employeeValue.textContent = `${value}人以上`;
        });
        
        // 下拉筛选
        dropdownSelects.forEach(select => {
            select.addEventListener('click', function() {
                this.classList.toggle('active');
                // 实际应用中这里会显示下拉选项
                showToast(`选择${this.querySelector('span:first-child').textContent}`);
            });
        });
        
        // 重置筛选条件
        resetFiltersBtn.addEventListener('click', function() {
            // 重置标签筛选
            filterTags.forEach(tag => {
                tag.classList.remove('active');
                if (tag.textContent.includes('全部')) {
                    tag.classList.add('active');
                }
            });
            
            // 重置复选框
            checkboxes.forEach(checkbox => {
                checkbox.classList.remove('checked');
                checkbox.querySelector('i').style.display = 'none';
            });
            
            // 重置开关
            toggles.forEach(toggle => {
                toggle.classList.remove('active');
            });
            
            // 重置滑块
            yearRange.value = 10;
            yearValue.textContent = '10年以上';
            
            // 清空活跃筛选标签
            document.querySelector('.active-filters-tags').innerHTML = '<div style="color: var(--text-tertiary); font-size: 0.85rem;">暂无筛选条件</div>';
            
            showToast('已重置重置所有筛选条件');
        });
        
        // 应用筛选条件
        applyFiltersFiltersBtn.addEventListener('click', function() {
            showToast('已应用筛选条件，找到24家符合条件的企业');
        });
        
        // 移除单个筛选条件
        removeFilterTags.forEach(tag => {
            tag.addEventListener('click', function() {
                this.parentElement.parentElement.remove();
                
                // 如果没有筛选条件了，显示提示
                if (document.querySelector('.active-filters-tags').children.length === 0) {
                    document.querySelector('.active-filters-tags').innerHTML = '<div style="color: var(--text-tertiary); font-size: 0.85rem;">暂无筛选条件</div>';
                }
                
                showToast('已移除筛选条件');
            });
        });
        
        // 加载更多
        loadMoreBtn.addEventListener('click', function() {
            const spinner = this.querySelector('.fa-spinner');
            const text = this.querySelector('span');
            const originalText = text.textContent;
            
            spinner.style.display = 'inline-block';
            text.textContent = '加载中...';
            this.disabled = true;
            
            setTimeout(() => {
                spinner.style.display = 'none';
                text.textContent = originalText;
                this.disabled = false;
                showToast('已加载更多更多企业');
            }, 1500);
        });
        
        // 筛选抽屉控制
        filterDrawerDrawerBtn.addEventListener('click', function() {
            filterDrawer.classList.add('open');
        });
        
        closeDrawerBtn.addEventListener('click', function() {
            filterDrawer.classList.remove('open');
        });
        
        // 抽屉内重置筛选
        resetDrawerFiltersFiltersBtn.addEventListener('click', function() {
            const drawerCheckboxes = filterDrawer.querySelectorAll('.custom-checkbox');
            drawerCheckboxes.forEach(checkbox => {
                checkbox.classList.remove('checked');
                checkbox.querySelector('i').style.display = 'none';
            });
            
            const drawerTags = filterDrawer.querySelectorAll('.filter-tag');
            drawerTagsTags.forEach(tag => {
                tag.classList.remove('active');
                if (tag.textContent.includes('全部')) {
                    tag.classList.add('active');
                }
            });
            
            employeeRange.value = 500;
            employeeValue.textContent = '500人以上';
            
            showToast('已重置高级筛选条件');
        });
        
        // 应用抽屉筛选
        applyDrawerFiltersBtn.addEventListener('click', function() {
            filterDrawer.classList.remove('open');
            showToast('已应用高级筛选条件');
        });
        
        // 其他按钮事件
        backBtn.addEventListener('click', function() {
            history.back();
        });
        
        // 底部导航点击
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
                this.classList.add('active');
                const title = this.querySelector('span').textContent;
                showToast(`已切换到${title}`);
            });
        });
        
        // 企业卡片点击
        document.querySelectorAll('.enterprise-card').forEach(card => {
            card.addEventListener('click', function() {
                const name = this.querySelector('.enterprise-name').textContent;
                showToast(`查看${name}详情`);
            });
        });
        
        // 关注按钮点击
        document.querySelectorAll('.enterprise-follow').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                if (this.classList.contains('followed')) {
                    this.classList.remove('followed');
                    this.textContent = '关注';
                    showToast('已取消关注');
                } else {
                    this.classList.add('followed');
                    this.textContent = '已关注';
                    showToast('关注成功');
                }
            });
        });
        
        // 提示消息功能
        function showToast(message) {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.classList.add('show');
            
            setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }
    </script>
</body>
</html>

